import React, { useState } from 'react';
import { Button, Card, Flex, Space, Splitter, Tabs, Typography } from 'antd';
import DatabaseList from '../database-list';
import DatabaseTitle from '../database-title';
import DatabaseDesc from '../database-desc';
import TableList from '../table-list';
import DatabaseContext from './database-context';

const { Text } = Typography;

export function Component() {
  const [currentDatabase, setCurrentDatabase] = useState<Bn.Meta.MetaDatabase>();

  const handleDatabaseChanged = (item: Bn.Meta.MetaDatabase) => {
    setCurrentDatabase(item);
  };

  return (
    <DatabaseContext.Provider value={currentDatabase!}>
      <Splitter>
        <Splitter.Panel
          collapsible
          defaultSize={300}
          min={250}
          max="25%"
          style={{ backgroundColor: 'white' }}
        >
          <Space
            direction="vertical"
            style={{ display: 'flex' }}
          >
            <Flex
              justify={'space-between'}
              align={'center'}
              style={{ padding: 16 }}
            >
              <Text strong>数据源</Text>
              <Button
                color="primary"
                variant="link"
              >
                新建
              </Button>
            </Flex>
            <DatabaseList onDatabaseChanged={handleDatabaseChanged}></DatabaseList>
          </Space>
        </Splitter.Panel>
        <Splitter.Panel>
          <DatabaseTitle database={currentDatabase}></DatabaseTitle>
          <Tabs
            defaultActiveKey="1"
            items={[
              {
                key: '1',
                label: '数据源配置',
                children: (
                  <div style={{ margin: '0 10px 0 10px' }}>
                    <DatabaseDesc database={currentDatabase}></DatabaseDesc>
                  </div>
                )
              },
              {
                key: '2',
                label: '数据源表',
                children: (
                  <Card style={{ margin: '0 10px 0 10px' }}>
                    <div>
                      <TableList database={currentDatabase}></TableList>
                    </div>
                  </Card>
                )
              }
            ]}
            size="small"
            tabBarStyle={{ backgroundColor: 'white', paddingLeft: 20 }}
          />
        </Splitter.Panel>
      </Splitter>
    </DatabaseContext.Provider>
  );
}
